<template>
  <div class="order-detail">
    <van-nav-bar :title="$route.meta.title" left-arrow @click-left="onClickLeft" style="width:100%;" :border="false" />
    <div class="order-detail-steps">
      <van-steps :active="orderActive" active-color="#1bb89c">
        <van-step v-for="step in lists" :key="step">{{step}}</van-step>
      </van-steps>
    </div>
    <div class="order-address">
      <van-cell :icon="require('@/assets/order/receives.png')" :title="address_list.username + ' ' + address_list.phone" />
      <van-cell :icon="require('@/assets/order/location.png')" :title="address_list.province + address_list.city + address_list.district + address_list.address" />
    </div>
    <div class="order-orders">
      <van-cell :icon="require('@/assets/order/shops.png')" :title="order_list.seller_id==0?'总部':order_list.spf_name" title-class="shopname" />
      <div class="product-item">
        <van-card v-for="n in detail_list" :key="n.id" :price="n.issprice==1?n.sprice:n.productprice" :desc="n.sidedish" :title="n.productname" :num="n.amount" :thumb="img + n.imgarr[0]" />
      </div>
      <div class="orders-row">
        <span>总价￥</span><span class="totals">{{order_list.totalfee}}</span>
        <span>，优惠￥</span><span class="totals">{{order_list.reducefee}}</span>
        <span>，实付￥</span><span class="totals">{{order_list.realFee}}</span>
      </div>
    </div>
    <van-cell-group class="order-infos" :border="false">
      <van-cell title="订单信息" class="order-infos-npd" />
      <van-cell title="订单编号" :value="order_list.orderno" value-class="wraps" />
      <van-cell title="支付单号" :value="order_list.payorderno==null?'暂无支付单号':order_list.payorderno" value-class="wraps" />
      <van-cell title="付款方式" :value="order_list.paytype=='WECHAT'?'微信支付':order_list.paytype=='ALIPAY'?'支付宝':order_list.paytype=='UNIONPAY'?'银联':'其他支付方式'" />
      <van-cell title="下单时间" :value="order_list.orderat|dateFilter" />
      <van-cell title="支付时间" :value="order_list.payat" />
      <van-cell title="备注" :value="order_list.remark" />
    </van-cell-group>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: 'MyOrderDetail',
  data () {
    return {
      sid: '',
      orderActive: 0,
      order_list: {},
      address_list: {},
      detail_list: [],
      lists: ['待发货', '配送中', '待收货', '交易完成']
    };
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    getOrderDetail (sid) {
      this.$axios("/buy/orderdetailinfo", {
        id: sid,
      })
        .then((res) => {
          this.address_list = res.data.data.address_data
          this.order_list = res.data.data.order_data
          this.detail_list = res.data.data.detail_data.map(fn => {
            return {
              ...fn,
              imgarr: fn.menuimage.split(',')
            }
          })
          switch (this.order_list.state) {
            //-2 审核失败  -1: 审核状态   0: 未支付   1：下单支付配货中  3：配送中   4:已完成配送  10：已退款
            case "1": this.orderActive = 0; break;
            case "3": this.orderActive = 1; break;
            case "4": this.orderActive = 2; break;
            case "5": this.orderActive = 3; break;
            default: break;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 发货 
    sendOut (active) {
      this.$axios("/buy/distribution", {
        id: this.sid, //订单ID
        state: 3 //3-开始配送；4-完成配送
      })
        .then((res) => {
          if (res.data.code == 1) {
            Toast.success('已发货！')
            setTimeout(() => {
              this.$router.push({ path: `/sends/${active}` })
            }, 1000);
          } else {
            Toast.fail('操作失败')
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 配送
    sents (active) {
      this.$axios("/buy/distribution", {
        id: this.sid, //订单ID
        state: 4 //3-开始配送；4-完成配送
      })
        .then((res) => {
          if (res.data.code == 1) {
            Toast.success('已配送！')
            setTimeout(() => {
              this.$router.push({ path: `/sends/${active}` })
            }, 1000);
          } else {
            Toast.fail('操作失败')
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  created () {
    this.sid = this.$route.params.sid
    this.getOrderDetail(this.sid)
  },
}
</script>

<style lang="less" scoped>
.order-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f7f8fa;
  &-steps {
    display: block;
    width: 100%;
  }
  .order-address {
    display: flex;
    flex-direction: column;
    margin: 20px 0 10px;
  }
  .order-address /deep/ .van-cell__left-icon,
  .order-orders /deep/ .van-cell__left-icon {
    display: flex;
    align-items: center;
    font-size: 0.5rem;
    margin-right: 20px;
  }
  .order-orders {
    margin: 10px 0;
    background-color: #fff;
    .shopname {
      font-size: 30px;
      font-weight: bold;
    }
    .orders-row {
      text-align: right;
      font-size: 25px;
      color: rgb(185, 185, 185);
      padding: 20px;
      letter-spacing: -2px;
      .totals {
        color: #444;
        font-size: 28px;
        font-weight: bold;
      }
    }
    .product-item {
      /deep/ .van-card {
        background-color: #fff;
      }
      /deep/ .van-card__title {
        font-size: 26px;
        font-weight: bold;
        padding: 10px 0;
      }
    }
  }
  .order-infos {
    margin: 10px 0 200px;
    .wraps {
      overflow: 0;
    }
    &-npd {
      padding: 20px;
      font-size: 30px;
      font-weight: bold;
    }
  }
}
</style>